<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例4</title>
    <style>
        .mydiv {
            width: 100px;
            height: 100px;
            background-color: black;
            margin: 10px;
        }
    </style>
</head>

<body>
    <!-- 张皓然 179001202 -->
    <div>
        <button class="btn">点击将div变成红色</button>
    </div>
    <div style="display: flex;">
        <div class="mydiv"></div>
        <div class="mydiv"></div>
        <div class="mydiv"></div>
    </div>

    <script>
        document.querySelector('.btn').onclick = function() {
            let divs = document.querySelectorAll('.mydiv')
            divs.forEach(e => {
                e.style.backgroundColor = 'red'
            });
        }
    </script>
</body>

</html>